<template>
    <div class="integral full">
        <router-view/>
        <div class="bottom-fixed-menu">
            <div :class="['menu-item', active === 1 && 'menu-item-active']">
                <div @click="nav(1)">
                    <img src="../assets/img/6.png" v-show="active !== 1" alt=""/>
                    <img src="../assets/img/5.png" v-show="active === 1" alt=""/>
                    <div>主页</div>
                </div>
            </div>
            <div :class="['menu-item', active === 2 && 'menu-item-active']">
                <div @click="nav(2)">
                    <img src="../assets/img/4.png" v-show="active !== 2" alt=""/>
                    <img src="../assets/img/3.png" v-show="active === 2" alt=""/>
                    <div>兑换</div>
                </div>
            </div>
            <div :class="['menu-item', active === 3 && 'menu-item-active']">
                <div @click="nav(3)">
                    <img src="../assets/img/2.png" v-show="active !== 3" alt=""/>
                    <img src="../assets/img/1.png" v-show="active === 3" alt=""/>
                    <div>个人中心</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'integral',
        data () {
            return {
                active: 1
            }
        },
        methods: {
            nav (t) {
                let p = '';
                switch (t) {
                    case 1:
                        p = '/Index';
                        break;
                    case 2:
                        p = '/Exchange';
                        break;
                    case 3:
                        p = '/User';
                        break;
                }
                try {
                    if (this.$router.history.current.fullPath === p) return
                } catch (e) {
                    console.log(e)
                }
                this.$router.push(p)
            }
        },
        beforeRouteUpdate (to, from, next) {
            // console.log(to, from, 'to, from, next');
            if (to.fullPath === '/Exchange') {
                this.active = 2
            } else if (['/User', '/UpdateNickname'].indexOf(to.fullPath) > -1) {
                this.active = 3
            } else {
                this.active = 1
            }
            next()
        },
        beforeRouteEnter (to, from, next) {
            console.log(to, from, 'to, from, next');
            next(vm => {
                if (to.fullPath === '/Exchange') {
                    vm.active = 2
                } else if (['/User', '/UpdateNickname'].indexOf(to.fullPath) > -1) {
                    vm.active = 3
                } else {
                    vm.active = 1
                }
            })
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
    .integral {
        overflow-y: auto;

        .bottom-fixed-menu {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #ffffff;

            .menu-item {
                width: calc(100% / 3);
                text-align: center;
                display: flex;
                justify-content: center;
                align-items: center;

                img {
                    width: 0.34rem;
                    height: 0.34rem;
                }

                > div {
                    > div {
                        font-weight: 500;
                        color: rgba(153, 153, 153, 1);
                        margin-top: 0.06rem;
                    }
                }
            }

            .menu-item-active {
                > div {
                    > div {
                        color: rgba(255, 150, 38, 1);
                    }
                }
            }
        }
    }
</style>
